<template>
  <div id="cesiumContainer"></div>
  <div id="toolbar-wave"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
import { PassEffect } from '@/utils/PassEffect.js'

const cesiumViewer = ref(null);
const handler = ref(null)
const dtzID = ref(null)
const dtzModel = ref(null)



// Cesium异步加载gltf模型: 高度
const loadGltfModel = async (id, gltfurl, posArr, oriArr) => {
  try {
    const headingPositionRoll = new Cesium.HeadingPitchRoll();
    headingPositionRoll.heading = Cesium.Math.toRadians(oriArr[0]);
    headingPositionRoll.pitch = Cesium.Math.toRadians(oriArr[1]);
    headingPositionRoll.roll = oriArr[2];
    const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator("north", "west");
    const modelPosition = Cesium.Cartesian3.fromDegrees(posArr[0], posArr[1], posArr[2]);
    const flyPosition = Cesium.Cartesian3.fromDegrees(posArr[0] + 0.015, posArr[1] - 0.015, 2000);
    const flyOrientation = { heading: Cesium.Math.toRadians(-45), pitch: Cesium.Math.toRadians(-45), roll: 0.0 };
    const model = await Cesium.Model.fromGltfAsync({
      url: gltfurl, modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(modelPosition,
        headingPositionRoll,
        Cesium.Ellipsoid.WGS84,
        fixedFrameTransform),
      scale: 20.0
    });
    model.id = id
    cesiumViewer.value.scene.primitives.add(model);
    cesiumViewer.value.camera.flyTo({
      destination: flyPosition,
      orientation: flyOrientation,
      duration: 1 // 过渡动画的持续时间(秒)
    });
  } catch (error) {
    console.log(error);
  }
};


const addIcon = (viewer, lonlat) => {
  let x = 5;//控制频率改变x大小越大闪烁间隔越大
  let ha = true; //控制颜色变换的开关
  let circleColor = Cesium.Color.RED; // 圆圈颜色
  let qsize = 35

  let isq = true
  const entity = viewer.entities.add({
    point: {
      show: true,
      pixelSize: new Cesium.CallbackProperty(function (time, result) {
        if (isq) {
          x -= 0.2;
          if (x <= 0) {
            isq = false;
            qsize = 10;
          }
        } else {
          x += 0.2;
          if (x >= 5) {
            isq = true;
            qsize = 35;
          }
        }
        return qsize;
      }, false),
      color: new Cesium.CallbackProperty(function (time, result) {
        if (ha) {
          x -= 0.2;
          if (x <= 0) {
            ha = false;
            circleColor = Cesium.Color.BLUE;
          }
        } else {
          x += 0.2;
          if (x >= 5) {
            ha = true;
            circleColor = Cesium.Color.RED;
          }
        }
        return circleColor;
      }, false),
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
    },
    zIndex: 9999,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000.0),
    position: Cesium.Cartesian3.fromDegrees(Number(lonlat[0]), Number(lonlat[1]), Number(lonlat[2])),
    show: true
  });
  console.log('entity->', entity)
}

// 添加点击事件
const addClickEvent = (viewer) => {
  handler.value.setInputAction((movement) => {//鼠标左键事件，点击地图，在点击位置添加模型
    const pick = viewer.scene.pick(movement.position);
    // const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(movement.position), viewer.scene);//获取地形上的点
    if (pick) {
      if (pick.id === dtzID.value) {
        dtzModel.value = pick.primitive
        // 开启透视
        pick.primitive.color = Cesium.Color.WHITE.withAlpha(0.22);
      }
    } else {
      // 关闭透视
      dtzModel.value.color = Cesium.Color.WHITE.withAlpha(1);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

onMounted(() => {
  cesiumViewer.value = new Cesium.Viewer('cesiumContainer');
  handler.value = new Cesium.ScreenSpaceEventHandler(cesiumViewer.value.scene.canvas);
  addClickEvent(cesiumViewer.value)
  console.log('onMounted->handler', handler.value);
  const dtzUrl = 'public/dtz001.gltf';
  const dtzPos = [-123.0744619, 44.0503706, 0.0]
  const dtzOri = [0.0, 0.0, 0.0]
  const rkUrl = 'public/rk001.gltf';
  const rkPos = [-123.0955819, 44.0444706, 0.0]
  // 水平方向的旋转角度、俯仰角度、翻滚角度
  const rkOri = [90.0, 0.0, 0.0]
  dtzID.value = Cesium.createGuid()
  loadGltfModel(dtzID.value, dtzUrl, dtzPos, dtzOri)
  loadGltfModel(null, rkUrl, rkPos, rkOri)

  const circlePos = [-123.10569645624655, 44.04373887088818, 10.0]
  addIcon(cesiumViewer.value, circlePos)

  const circlePos2 = [-123.10569645624655, 44.04473887088818, 10.0]
  addIcon(cesiumViewer.value, circlePos2)

  const circlePos3 = [-123.10569645624655, 44.04573887088818, 10.0]
  addIcon(cesiumViewer.value, circlePos3)

  const circlePos4 = [-123.100569645624655, 44.0453887088818, 10.0]
  addIcon(cesiumViewer.value, circlePos4)

  const circlePos5 = [-123.1069645624655, 44.04553887088818, 10.0]
  addIcon(cesiumViewer.value, circlePos5)

  const xxx = new PassEffect(cesiumViewer.value, Cesium)
  const sbIcon = xxx.setCircleScanEffect({
    id: 'CircleScan',
    position: Cesium.Cartesian3.fromDegrees(circlePos5[0], circlePos5[1], 10.0),
    color: Cesium.Color.MEDIUMTURQUOISE.withAlpha(0.5),
    duration: 5000,
    border: 10,
    radius: 100
  })
  cesiumViewer.value.scene.postProcessStages.add(sbIcon)
  console.log('sbIcon->', sbIcon);
})

</script>

<style scoped lang="scss">
#cesiumContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>